<script setup lang="ts">
	import { ref, reactive, unref, computed } from 'vue'
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import { useNotify } from '@/hooks/web/useNotify/index.js'
	import { orderSettle, returnAdd } from '@/package_saleman/api/Order'

	// 消息弹窗
	const NotifyRef = ref<any>(null)
	const { showNotify } = useNotify(NotifyRef)

	const remark = ref('')

	// 路由参数
	interface RouteParams {
		store_id : string,
		cart_id : string,
		warehouse_id : string,
		warehouse_type : '1' | '2'
	}
	const routeParams = ref<RouteParams>({
		store_id: '',
		cart_id: '',
		warehouse_id: '',
		warehouse_type: '1'
	})
	onLoad((options) => {
		routeParams.value = options as RouteParams
		getList(JSON.parse(options.data))
	})
	const useOrderDetail = () => {
		const dataList = ref({})
		const getList = async (option) => {
			// const params = {
			// 	...routeParams.value
			// }
			// const res = await orderSettle(params)
			dataList.value = option;
		}

		return {
			dataList,
			getList,
		}
	}
	const { dataList, getList } = useOrderDetail()


	const submitLoading = ref(false)
	const submit = async () => {
		submitLoading.value = true
		try {
			const filteredItems = dataList.value.filter(item => item.num > 0);
			const data1 = filteredItems.map((res) => {
				return {
					id: res.id,
					goods_id: res.goods_id,
					goods_spec_id: res.goods_spec_id,
					unit: res.unit,
					type: res.goods_type,
					sale_price: res.sale_price,
					real_price: res.true_price,
					total_price: res.total_price,
					num: res.num,
					remark: res.remark
				}
			})
			const params = {
				// detail: JSON.stringify(unref(data1)),
				// store_id: unref(routeParams).store_id,
				// remark: remark.value,
				// order_channel: 2,
				// is_cx: unref(routeParams).warehouse_type,
				// warehouse_id: unref(routeParams).warehouse_id
				detail: JSON.stringify(unref(data1)),
				store_id: unref(routeParams).store_id,
				remark: remark.value,
				type: 1,
				order_type: 2,
				// is_cx: unref(routeParams).warehouse_type,
				warehouse_id: unref(routeParams).warehouse_id
			}
			const res = await returnAdd(params)
			showNotify({
				type: 'success',
				message: res.msg
			})
			setTimeout(() => {
				submitLoading.value = false
				uni.redirectTo({
					url: `/package_saleman/pages/Returnorder/index`
				})
			}, 500)

		} catch (err) {
			showNotify({
				type: 'error',
				message: err.msg
			})
			submitLoading.value = false
		}
	}
</script>

<template>
	<view class="content">
		<up-navbar title="结算台" autoBack placeholder></up-navbar>
		<view class="goods-box">
			<view class="box-header" v-if="dataList">商品详情</view>
			<view class="line"></view>
			<view class="main-box" v-for="(item, index) in dataList" :key="index">
				<view class="main-right">
					<view class="right-header">
						<view class="header-name">{{item.goods?.goods_name}}{{item.spec?.spec_name}}</view>
						<view style="color: rgba(155, 157, 159, 1);">
							￥{{item.true_price}}*{{item.num}}{{item.spec?.unit_name}}</view>
					</view>
					<view class="right-mod">{{item.goods?.code69}}</view>
					<view class="right-foot">
						<view class="foot-box">{{item.remark}}</view>
						<view style="font-size: 28rpx;color: rgba(245, 99, 81, 1);">￥{{item.total_price}}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 订单备注 -->
		<view class="payment-method">
			<view class="method-header">
				<view class="header-left">订单备注</view>
			</view>
			<view class="method-foot">
				<up-input placeholder="备注信息" border="surround" v-model="remark"></up-input>
			</view>
		</view>
		<view class="submit-area-placeholder"></view>
		<view class="submit-area">
			<view class="info">
				<view class="line">
					<text class="label">总计：</text>
					<text
						style="color: #F54E4E;font-size: 28rpx;">￥{{dataList.reduce((cur, item) => cur + Number(item.total_price), 0).toFixed(2)}}</text>
				</view>
			</view>
			<view class="submit-btn">
				<up-button text="提交" shape="circle" :loading="submitLoading" :disabled="submitLoading"
					color="rgba(55, 131, 252, 1)" @click="submit"></up-button>
			</view>
		</view>
		<!-- <up-picker :show="show" :columns="columns" keyName="label" @cancel="cancel" @confirm="confirm"
			closeOnClickOverlay="true"></up-picker> -->
		<up-notify ref="NotifyRef"></up-notify>
	</view>
</template>

<style scoped lang="scss">
	.content {
		width: 100%;
		min-height: 100vh;
		background: rgba(242, 243, 245, 1);

		.goods-box {
			width: 702rpx;
			border-radius: 13rpx;
			background: rgba(255, 255, 255, 1);
			margin: 20rpx auto;
			padding: 30rpx;
			box-sizing: border-box;

			.box-header {
				font-size: 28rpx;
				font-weight: 700;
				color: rgba(2, 14, 36, 1);
			}

			.line {
				width: 654rpx;
				height: 2rpx;
				background: rgba(0, 0, 0, 0.1);
				margin: 20rpx 0rpx;
			}

			.main-box {
				display: flex;
				margin-top: 40rpx;

				.main-left {
					width: 140rpx;
					height: 140rpx;
					margin-right: 20rpx;
					position: relative;

					.gift {
						position: absolute;
						top: 0;
						left: 0;
						width: 60rpx;
						height: 32rpx;
						border-radius: 6rpx 0rpx 0rpx 0rpx;
						background: rgba(55, 131, 252, 1);
						font-size: 22rpx;
						font-weight: 500;
						color: rgba(255, 255, 255, 1);
						text-align: center;
						line-height: 32rpx;
					}
				}

				.main-right {
					width: 100%;
					font-size: 24rpx;
					font-weight: 500;

					.right-header {
						display: flex;
						justify-content: space-between;

						.header-name {
							font-size: 28rpx;
							color: rgba(2, 14, 36, 1);
						}

					}

					.right-mod {
						color: rgba(106, 107, 107, 1);
						margin: 20rpx 0rpx;
					}




					.right-foot {
						display: flex;
						justify-content: space-between;

						.foot-box {
							font-size: 24rpx;
							font-weight: 500;
							color: rgba(106, 107, 107, 1);

						}
					}
				}
			}
		}

		.payment-method {
			width: 702rpx;
			border-radius: 13rpx;
			background: rgba(255, 255, 255, 1);
			margin: 20rpx auto;
			padding: 30rpx;
			box-sizing: border-box;

			.method-header {
				display: flex;
				justify-content: space-between;

				.header-left {
					font-size: 28rpx;
					color: rgba(2, 14, 36, 1);
				}

				.header-right {
					font-size: 24rpx;
					font-weight: 500;
					color: rgba(155, 157, 159, 1);
				}
			}

			.payment-container {
				display: flex;
				justify-content: space-between;
				margin-top: 40rpx;
			}

			.method-foot {
				margin: 20rpx 0rpx;
			}
		}

		.submit-area-placeholder {
			width: 100%;
			height: 100rpx;
			padding-top: 20rpx;
			padding-bottom: constant(safe-area-inset-bottom);
			/* 兼容iOS < 11.2 */
			padding-bottom: env(safe-area-inset-bottom);
			/* 兼容iOS 11.2及以上 */
		}

		.submit-area {
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 10;
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: calc(100% - 80rpx);
			height: 100rpx;
			background-color: #FFF;
			padding: 0 40rpx;
			padding-bottom: constant(safe-area-inset-bottom);
			/* 兼容iOS < 11.2 */
			padding-bottom: env(safe-area-inset-bottom);
			/* 兼容iOS 11.2及以上 */
			box-shadow: 0rpx -4rpx 8rpx 0rpx #efefef;

			.info {
				flex: 2;
				display: flex;
				flex-direction: column;

				.line {
					display: flex;
					gap: 12rpx;
					color: #9C9AA1;
				}

				.label {
					font-size: 28rpx;
				}
			}

			.submit-btn {
				flex: 1;
			}
		}
	}
</style>